<template>
	<view>
		<!-- #ifdef MP-WEIXIN  -->
		<view v-if="videoType=='rtmp'" style="position: relative;">
			<live-player style="width:100%; height: 225px;" id="livePlayer" :src="playUrl" :orientation="direction"
				mode="live" muted="false" object-fit='contain' autoplay @statechange="statechange" @error="error"
				@fullscreenchange="fullscreenChange" />
			<cover-view
				style="width:100%;display:flex;flex-direction:row;justify-content:space-between;position:absolute;left:0rpx;bottom:20rpx">
				<cover-view style="width: 25px;height:25px;margin-left:15px;color: #FFF;font-size: 40rpx;"
					@tap="tapPlay" :class="isPlay ? 'cuIcon-stop' : 'cuIcon-playfill'">
				</cover-view>
				<cover-view style="width: 25px;height:25px;margin-right:15px;color: #FFF;font-size: 40rpx;"
					@tap="tapFullscreen" class='cuIcon-full'>
				</cover-view>
			</cover-view>
		</view>
		<video v-else id="liveplayer" :src="playUrl" controls="true" style="width:100%; height: 225px;"
			show-progress="false" autoplay="true">
		</video>
		<!--  #endif -->
		<!-- #ifdef H5  -->
		<view ref="video" class="video-js" style="position: fixed;width:100%;height:225px"></view>
		<!--  #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="video">
			<video :src="playUrl" autoplay="true" controls style="position: fixed;width:100%;height:225px">
			</video>
		</view>
		<!--  #endif -->
	</view>
</template>

<script>
	export default {
		name:'UniVideo',
		data() {
			return {
				videoType: '',
				playerContext: null,
				direction: 'vertical',
				isPlay: false,
				isFull: false,
			}
		},
		props: {
			playUrl: {
				type: String,
				default: ''
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		watch: {
			playUrl: {
				deep: true,
			 handler() {
					this.playUrlChange()
				}
			}
		},
		created() {
			this.playUrlChange()
		},
		onReady() {
			// #ifdef H5
			const video = document.createElement('video')
			video.id = 'video'
			video.style = 'width:100%;height:100%;position:absolute;top:50%;left: 50%;transform: translate(-50%,-50%);'
			video.autoplay = true
			video.controls = true
			const source = document.createElement('source')
			source.src = this.playUrl
			video.appendChild(source)
			this.$refs.video.$el.appendChild(video)
			videojs('video')
			// #endif
			// #ifdef MP-WEIXIN
			this.playerContext = uni.createLivePlayerContext('livePlayer', this);
			// #endif
		},
		methods: {
			playUrlChange() {
				if (!this.playUrl || this.playUrl === '') {
					return
				}
				if (this.playUrl.indexOf(".m3u8") > 0) {
					this.videoType = 'm3u8'
				} else if (this.playUrl.indexOf("rtmp://") === 0) {
					this.videoType = 'rtmp'
				} else if (this.playUrl.indexOf("rtsp://") === 0) {
					this.videoType = 'rtsp'
				}
				this.isPlay = true
			},
			//微信小程序  兼容
			tapPlay(e) {
				this.isPlay ? this.playerContext.pause() : this.playerContext.resume()
				this.isPlay = !this.isPlay
			},
			tapFullscreen(e) {
				this.isFull ? this.playerContext.exitFullScreen({}) : this.playerContext.requestFullScreen({})
				this.isFull = !this.isFull
			},
			statechange(e) {
				// console.log('livePlayer code:', e.detail.code)
			},
			error(e) {
				// console.error('livePlayer error:', e.detail.errMsg)
			},
			fullscreenChange(e) {
				this.direction = e.detail.fullScreen ? 'horizontal' : 'vertical'
			},
		}
	}
</script>

<style>
</style>
